<template>
   <div class="main">
          <ul class="infinite-list" ref="scroll" v-infinite-scroll="load" infinite-scroll-immediate style="overflow:auto">
                <li v-for="(item,index) in product_list" :key="index" class="infinite-list-item"  >
                   <p class="f18 origin">{{item.productName}}</p>
                   <p class="listext">总重量/吨 <span class="number">{{filter(item.orderWeight)}}</span> </p>
                   <p class="listext">总金额/元 <span class="number">{{filter(item.orderSales)}}</span></p>
                </li>
          </ul>
   </div>
</template>

<script>
import untils from '@/untils/index'
export default {
  props: {
    product_list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      active: 0
    }
  },
  created () {

  },
  methods: {
    filter (num) {
      if (num > 0) {
        return untils.unitConvert(num)
      } else {
        return 0
      }
    },
    load () {}
  }
}
</script>

<style scoped>
.infinite-list{
    width: 100%;
    max-height: 80vh;
    /* background: white; */
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items:flex-start;

}
  ul>li{
      list-style: none;
      width:31%;
      height:100px;
      padding: 10px 0;
      /* margin-bottom: 10px; */
      color: white;
      background: #030741FF;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-left: 5px;

  }
  ul>li>p{
    margin: 0;
  }

 .infinite-list::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

.infinite-list::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         /* -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.2); */
        /* background: #04C0E2FF; */
        background: none;
    }

.infinite-list::-webkit-scrollbar-track {/*滚动条里面轨道*/
        /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
        border-radius: 10px;
        /* background: rgba(6, 7, 107, 0.59); */
         background: none;

}
.origin{
  color: #F3CD04FF;
  font-weight: 800;
  padding: 10px 15px;
}
.listext{
  color: #01C1E3FF;
  padding: 5px 15px;
}
.number{color: white;font-size: 14px;padding-left: 10px;}
</style>
